<!--饼状图组件-->
<!--通过修改option来实现组件复用-->
<template>
    <div id="annualpie-box" style="height: 300px">
      <div id=annualpie></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    export default {
      name: "AnnualPie",
      props:{
        series:{
          default:[
            {value: 1048, name: '车型一'},
            {value: 735, name: '车型二'},
            {value: 94, name: '车型三'},
          ],
        }
      },
      data(){
        return{
         options:{},
        }
      },
      mounted() {
        this.initAnnualpie();
      },
      methods:{
        initAnnualpie(){
          this.options={
            tooltip: {
              trigger: 'item'
            },

            legend: {
              orient: 'vertical',
              left: 'right',
              y:'top',
              fontSize:'40px',
            },
            series: [
              {
                name: '在线车型统计',
                type: 'pie',
                radius: ['60%', '80%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  left: 'left',
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.series,
              }
            ]
          };
          let pieChart = echarts.init(document.getElementById('annualpie'));
          pieChart.setOption(this.options)
        },
      }
    }
</script>

<style scoped>
  #annualpie{
    height: 100%;
    width: 100%;
  }
</style>
